{%extends "base.html"%}

{%block extrajs%}
    <script>
    $(function (){
    {%for aula in resultados%}
    {%for equipo in aula.equipos%}
        //$("#equipo_{{equipo.id}}").popover({content:"<ul><li>Sistema Operativo:{{equipo.sistema_operativo}}</li><li>Aplicaciones:<ul>{%for app in equipo.aplicaciones.all%}<li>{{app.nombre}}</li>{%endfor%}</ul></li></ul>", title:"Características de {{equipo.nombre}}", placement:"top"});
        {% if equipo.id in reservados %}
        $("#equipo_{{equipo.id}}").tooltip({title:"Reservado", placement:"top"});
        {%else%}
        $("#equipo_{{equipo.id}}").tooltip({title:"Libre", placement:"top"});
        {%endif%}
        $('#equipo_{{equipo.id}}_modal').modal({show:false})
    {%endfor%}
    {%endfor%}
    });
    </script>
{%endblock%}


{%block maincontent%}

    
    {%for aula in resultados%}
    {%if aula.equipos%}
    {%with aula.aula.disponible as aula_disponible%}
    <div class="well">
        <h3 class="pull-left">Resultados en aula {{aula.aula.nombre}}</h3>
        <a class="btn btn-warning pull-right" href="{%url reservaciones.views.aula_programar_practica aula.aula.id%}">Programar Práctica</a>
    </div>
    <div class="equipo-grid">
    <div class="row">

    {%for equipo in aula.equipos%}
        <div class="span2 equipo-elem" id="equipo_{{equipo.id}}" rel="popover" >
            {%if aula_disponible%}
            <span class="plus_size label {% if equipo.id in reservados %}label-important{%else%}label-info{%endif%}">{{equipo.nombre}}</span>
            {%else%}
            <span class="plus_size label label-warning">{{equipo.nombre}}</span>
            {%endif%}
            <br>

            <div class="btn-group">
                <a class="btn dropdown-toggle action_button"" data-toggle="dropdown" href="#">Acción <span class="caret"></span></a>
                  <ul class="dropdown-menu" style="text-align:left;">
                    <li><a href="{%url reservaciones.views.equipo_reservar_ahora equipo.id%}">Reservar</a></li>
                    <li><a data-toggle="modal" href="#equipo_{{equipo.id}}_modal">Ver detalles de equipo</a></li>
                    <li class="divider"></li>
                    <li><a href="{%url informes.views.levantar_informe_equipo equipo.id%}"><i class="icon-exclamation-sign"></i> Levantar un informe</a></li>
                    {% if equipo.id in reservados %}
                    <li class="divider"></li>
                    <li><a href="{%url reservaciones.views.equipo_terminar_actual equipo.id%}"><i class="icon-time"></i> <strong>Terminar</strong> reservación actual</a></li>
                    <li><a href="{%url reservaciones.views.equipo_cancelar_actual equipo.id%}"><i class="icon-remove-sign"></i> <strong>Cancelar</strong> reservación actual</a></li>
                    {%endif%}

                  </ul>
            </div>
        </div>

        <div class="modal hide" id="equipo_{{equipo.id}}_modal">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Detalles de {{equipo.nombre}}</h3>
          </div>
          <div class="modal-body">
            <table class="table">
                <tr>
                    <td><strong>Sistema Operativo</strong></td><td>{{equipo.sistema_operativo}}</td>
                </tr>
                <tr>
                    <td><strong>RAM</strong></td><td>{{equipo.ram}}</td>
                </tr>
                <tr>
                    <td><strong>Disco Duro</strong></td><td>{{equipo.disco_duro}}</td>
                </tr>
                <tr>
                    <td style="vertical-align:top;"><strong>Aplicaciones</strong></td><td><ul>{%for app in equipo.aplicaciones.all%}<li>{{app.nombre}}</li>{%endfor%}</ul</td>
                </tr>
            </table>
          </div>
          <div class="modal-footer">
            <a href="#" class="btn btn-danger" data-dismiss="modal">Close</a>
          </div>
        </div>
    {%endfor%}
</div>
</div>
<br>
<br>
    {%endwith%}
    {%endif%}
    {%endfor%}
{%endblock%}

